<template>
  <div class="navContent">
    <!-- 五个小图部分 -->
    <ul class="navContent-list">
      <router-link tag="li" :to="pathList[index]" class="list-item" v-for="(item,index) in navData" :key="item.id">
        <div class="img">
          <img :src="item.imgUrl" alt="" />
        </div>
        <p class="s-title">{{item.title}}</p>
      </router-link>
    </ul>
    <!-- 一条广告部分 -->
    <router-link
      tag="div"
      to="/manicure"
     class="navBar">
      <div class="navBar-left">美甲资讯</div>
      <span>|</span>
      <p>不能错过的款,美呆了!</p>
    </router-link>
    <!-- 热门活动 -->
    <div class="hot">
      <div class="hotContent">
        <router-link tag="div" :to="{name:pathList1[index],params:{id:item}}" class="hot-item" v-for="(item,index) in navBarData" :key="item.id">
          <img :src="item.url" alt="">
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import api from "../../api"
export default {
  name: "HomeNav",
  data(){
    return{
      pathList:['/sitetesting','/talents','/shopping','/','/shopping'],
      pathList1:['ActivePage','SiteTesting'],
      navData:[],
      navBarData:[]
    }
  },
  mounted(){
    // console.log(this.pathList[0]);
    api.getNav().then(res=>{
      // console.log(res.data.list);
      this.navData = res.data.list
    })
    api.getNavBar().then(res=>{
      // console.log(res);
      this.navBarData = res.data.list
    })
  }
};
</script>

<style lang="less" scoped>
.navContent {
  width: 100%;
  // height: 120px;
  overflow: hidden;
  text-align: center;
}
.navContent-list {
  height: 120px;
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  .list-item {
    flex: 1;
    .img {
      width: 45px;
      height: 45px;
      margin: 0 auto;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .s-title {
      font-size: 10px;
      margin-top: 10px;
    }
  }
}
// navBar
.navBar {
  width: 100%;
  height: 41px;
  display: flex;
  .navBar-left {
    width: 49px;
    height: 23px;
    line-height: 17px;
    color: rgba(153, 153, 153, 1);
    font-size: 12px;
    padding: 10px;
  }
  span {
    margin: 10px;
    color: rgba(153, 153, 153, 1);
  }
  p {
    width: 177px;
    height: 23px;
    line-height: 20px;
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    font-family: Arial;
    padding: 10px;
  }
}
// 热门活动
.hot {
  padding: 10px 0;
  background-color: #eee;
  .hotContent {
    width: 100%;
    height: 106px;
    line-height: 106px;
    display: flex;
    background-color: #fff;
    align-items: center;
    .hot-item {
      flex: 1;
      width: 170px;
      height: 83px;
      margin: 15px;
      img{
        width: 100%;
        height: 100%;
        border-radius: 8px;
      }
    }
  }
}
</style>